import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { PrimaryButton, Stack, TextField, Dropdown } from '@fluentui/react';
import { addTask } from './actions';

function TaskForm() {
  const [title, setTitle] = useState('');
  const [assignedId, setAssignedId] = useState(null);
  const dispatch = useDispatch();
  const users = useSelector(state => state.users);

  const userOptions = users.map(user => ({ key: user.id, text: user.name }));

  const handleSubmit = () => {
    if (title) {
      dispatch(addTask({ title, assignedId }));
      setTitle('');
      setAssignedId(null);
    }
  };

  return (
    <Stack tokens={{ childrenGap: 10 }}>
      <TextField label="Task Title" value={title} onChange={(e, newValue) => setTitle(newValue)} />
      <Dropdown label="Assign to" options={userOptions} selectedKey={assignedId} onChange={(e, option) => setAssignedId(option?.key)} />
      <PrimaryButton text="Add Task" onClick={handleSubmit} />
    </Stack>
  );
}

export default TaskForm;